<template>
  <div class="padding flex height-100 content-with-tree">
    <div class="flex direction-column height-100 right-content">
      <div class="search-form">
        <el-form inline>
          <el-form-item label="所属区域">
            <area-picker v-model="district"></area-picker>
          </el-form-item>
          <el-form-item label="日期范围">
            <el-date-picker
              type="daterange" v-model="daterange"
              range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-model="keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        v-loading="loading" :data="lists" height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
      >
        <div slot="empty" class="empty-lists">
          <svg-icon name="search"></svg-icon>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
          <template v-if="column.prop === 'enterprise'" #default="{ row }">
            <el-link :underline="false" type="primary" @click="navigateToEnterpriseAnalysis(row, 'enterpriseCode')">{{row.enterprise}}</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination" layout="total,prev,pager,next"
        hide-on-single-page background
        :current-page.sync="pagination.pageNumber"
        :page-size="pagination.pageSize" :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import AreaPicker from '@/components/area-picker'
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'

export default {
  name: 'report-query',
  components: {
    AreaPicker
  },
  mixins: [Navigate2enterpriseAnalysis],
  data () {
    return {
      daterange: [],
      keyword: '',
      district: '',
      loading: false,
      lists: [],
      columns: [
        {
          label: '企业名称',
          prop: 'enterprise'
        },
        {
          label: '应上报周期数',
          prop: 'shouldReport'
        },
        {
          label: '上报周期数',
          prop: 'report'
        },
        {
          label: '审过期数',
          prop: 'pass'
        },
        {
          label: '退回期数',
          prop: 'back'
        },
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 12,
        total: 0
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    districts () {
      return this.$store.getters['user/districts']
    },
    qs () {
      const daterange = this.daterange
      return {
        keyword: this.keyword,
        start: daterange[0],
        end: daterange[1]
      }
    },
    energyEnterpriseList () {
      return this.$store.state.energyEnterpriseList
    },
  },
  watch: {
    energyEnterpriseList: {
      deep: true,
      handler () {
        this.getLists()
      }
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.lists = this.energyEnterpriseList.map(v => ({
            id: v.id,
            enterprise: v.name,
            shouldReport: '-',
            report: '-',
            pass: '-',
            back: '-'
          }))
          this.loading = false
        }, 600)
      })
    },
    onSearch () {
      this.pagination.pageNumber = 1
      this.$nextTick(() => {
        this.getLists()
      })
    },
    onNodeClick () {
      this.onSearch()
    }
  }
}
</script>

<style scoped>

</style>
